<template>
  <h2>{{person}}</h2>
  <h2>x: {{x}}</h2>
  <button @click="x++">x++</button>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>薪资：{{ jobs.j1.salary }}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="jobs.j1.salary++">增长薪资</button>
</template>

<script>
import {reactive, ref, toRefs,readonly, shallowReadonly} from "vue";

export default {
  name: "Demo",
  components: {},
  props: [],
  emits: [], // 用于注册VC的自定义事件，可不写，但会报警
  setup() {
    let person = reactive({
      name: '张三',
      age: 18,
      jobs: {
        j1: {
          salary: 30
        }
      }
    });

    let x = ref(10);

    // person = readonly(person);
    person = shallowReadonly(person);
    return {
      person,
      // name: toRef(person, 'name'),
      // age: toRef(person, 'age'),
      // salary: toRef(person.jobs.j1, 'salary')
      ...toRefs(person),
      x
    }
  },
}
</script>

<style scoped>

</style>